<!-- 页签 -->

<template>
  <div class="QuestionnairePreview-MyTab">
    <div
      v-for="item in TAB"
      :key="item[0]"
      :class="{ 'QuestionnairePreview-MyTab-active': tab === item[0] }"
      @click="toClick(item)"
    >
      <span>{{ item[1] }}</span>
    </div>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MyTab',

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      tab: '', // 激活项
    }
  },

  /**
   * 计算属性 (慎用箭头函数)
   */
  computed: {
    /**
     * 页签
     */
    TAB: () => [
      ['web', '电脑端'],
      ['app', '手机端'],
    ],
  },

  /**
   * 创建完成 (先抽取再调用)
   */
  created() {
    this.toClick(this.TAB[0])
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 点击
     */
    toClick([tab]) {
      this.tab = tab
      this.$emit('click', tab)
    },
  },
}
</script>
